<template>
    <d2-container>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="领取列表" name="one">
            </el-tab-pane>
            <el-tab-pane label="使用列表" name="two">
            </el-tab-pane>
        </el-tabs>
        <div class="muse_filter_box">
            <el-form ref="filtersForm" :model="form">
                <el-row :gutter="20">
                    <el-col :span="6">
                        <el-form-item>
                            <el-input placeholder="订单" v-model="form.order"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" @click="filterSearch('filtersForm')">搜索</el-button>
                        <el-button @click="resetForm('filtersForm')">重置</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <div class="muse_table_box">
            <div class="muse_control_box">
                <el-button @click="deleteSelected">删除选中</el-button>
                <el-button @click="deleteAll">删除全部</el-button>
            </div>
            <el-table
                    :data="tableData"
                    style="width: 100%"
                    @selection-change="handleSelectionChange">
                <el-table-column fixed type="selection" width="55"/>
                <el-table-column prop="coupon" label="优惠券"/>
                <el-table-column prop="order" label="订单"/>
                <el-table-column prop="createdAt" :label="createdAtLabel"/>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="300">
                    <template slot-scope="scope">
                        <el-button @click="deleteRow(scope.row)" type="text" size="small">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    class="muse_pagination"
                    :background="true"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="paging.page"
                    :page-sizes="paging.pageSizeAry"
                    :page-size="paging.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="paging.total">
            </el-pagination>
        </div>
    </d2-container>
</template>

<script>
  import tableMixin from '../mixins/tableMixin'
  export default {
    name: 'couponDetail',
    mixins: [tableMixin],
    data() {
      return {
        activeName: 'one',
        dateNameStr: '领取时间',
        form: {
          order:''
        }
      }
    },
    computed: {
      createdAtLabel() {
        return this.activeName === 'one'?'领取时间':'使用时间'
      }
    },
    methods: {
      handleClick(e) {
        this.activeName = e.name
      }
    }
  }
</script>

<style scoped>

</style>
